<template>
  <el-dialog 
    :title="title" 
    v-model="visible" 
    :width="width" 
    :close-on-click-modal="false"
    destroy-on-close
    center
    class="custom-dialog"
  >
    <div class="dialog-content">
      <el-form 
        :model="form" 
        :rules="rules" 
        ref="formRef" 
        :label-width="labelWidth"
        class="form"
        status-icon
      >
        <slot :form="form"></slot>
      </el-form>
    </div>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="handleCancel" plain>取 消</el-button>
        <el-button type="primary" @click="handleSubmit" :loading="loading">确 定</el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script>
export default {
  name: 'FormDialog',
  props: {
    title: {
      type: String,
      required: true
    },
    modelValue: {
      type: Boolean,
      default: false
    },
    form: {
      type: Object,
      required: true
    },
    rules: {
      type: Object,
      default: () => ({})
    },
    loading: {
      type: Boolean,
      default: false
    },
    width: {
      type: String,
      default: '550px'
    },
    labelWidth: {
      type: String,
      default: '120px'
    }
  },
  computed: {
    visible: {
      get() {
        return this.modelValue;
      },
      set(value) {
        this.$emit('update:modelValue', value);
      }
    }
  },
  methods: {
    handleCancel() {
      this.visible = false;
    },
    handleSubmit() {
      this.$refs.formRef.validate((valid) => {
        if (valid) {
          this.$emit('submit', this.form);
        }
      });
    },
    resetForm() {
      this.$refs.formRef?.resetFields();
    }
  }
};
</script>

<style scoped>
.custom-dialog {
  border-radius: 12px;
}

.dialog-content {
  padding: 0 20px;
}

.form {
  max-height: 60vh;
  overflow-y: auto;
}

.dialog-footer {
  display: flex;
  justify-content: center;
  gap: 12px;
  padding: 20px 0 10px;
}
</style>